<template>
  <div id="myOrder">
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column v-for="row in headerList" :key="row.key" :prop="row.key" :min-width="row.width" :label="row.label" header-align="center" align="center"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <div class="btnList">
            <div><el-button type="text" size="small" @click="seeDetail(scope.row)">查看详情</el-button></div>
            <div><el-button type="text" size="small" v-if="$store.state.user.roleName=='设计师'&&scope.row.status=='1'" @click="statusChange(scope.row, '2')">接受订单</el-button></div>
            <el-upload
              v-if="$store.state.user.roleName=='设计师'&&scope.row.status=='2'"
              class="uploader"
              :action="uploadUrl"
              :headers="headers"
              :show-file-list="false"
              accept=".jpeg,.png,.jpg,.gif"
              :on-success="(res, file)=> { return successPictureHandle(res, file, scope.row)}">
              <el-button type="text" size="small">上传图片</el-button>
            </el-upload>
            <div><el-button type="text" size="small" v-if="$store.state.user.roleName=='用户'&&scope.row.status=='3'" @click="remuneration(scope.row, '4')">支付报酬</el-button></div>
            <div><el-button type="text" size="small" v-if="$store.state.user.roleName=='用户'&&scope.row.status=='4'" @click="confirmOrder(scope.row, '5')">确认订单</el-button></div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail ref="orderDetail"/>
  </div>
</template>

<script>
import orderDetail from '../order/orderDetail.vue'
export default {
  components: { orderDetail },
  data () {
    return {
      dataListLoading: false,
      uploadUrl: this.$http.adornUrl('/uploadfile'), // 图片上传地址
      headers: { token: this.$cookie.get('token') }, // 图片所需token
      dataForm: {},
      headerList: [{
        key: 'orderSn',
        label: '订单编号',
        width: '150'
      },
      {
        key: 'clothingTypeName',
        label: '服装类型',
        width: '150'
      },
      {
        key: 'designerName',
        label: '设计师',
        width: '150'
      },
      {
        key: 'statusName',
        label: '订单状态',
        width: '150'
      },
      {
        key: 'orderDescribe',
        label: '订单描述',
        width: '150'
      },
      {
        key: 'customerAmount',
        label: '价格(元)',
        width: '150'
      }],
      dataList: []
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 查看详情
    seeDetail (row) {
      this.$refs.orderDetail.init(row)
    },
    // 用户信息
    infoChange () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/update'),
        method: 'post',
        data: this.$http.adornParams({
          ...this.dataForm
        })
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.$message.success('操作成功!')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 状态改变
    statusChange (row, status) {
      this.$http({
        url: this.$http.adornUrl('/sys/clothingorder/changestatus/' + row.id + '/' + status),
        method: 'post'
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.$message.success('操作成功!')
          this.getDataList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 图片上传成功
    successPictureHandle (res, file, row) {
      console.log(res, file, row)
      if (res.code === 0) {
        this.uploadPicture(row, res.pictureInfoVOS[0].imgAddress)
      } else {
        this.$message.error(res.msg)
      }
    },
    // 上传图片之后发送给服务器
    uploadPicture (row, designerPicture) {
      this.$http({
        url: this.$http.adornUrl('/sys/clothingorder/updesginerpic'),
        method: 'post',
        data: this.$http.adornParams({
          'id': row.id,
          'designerPicture': designerPicture
        })
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.statusChange(row, '3')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 支付报酬
    remuneration (row, status) {
      this.$prompt('请输入支付密码', '支付报酬', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入支付密码',
        inputPattern: /\S/,
        inputErrorMessage: '请输入支付密码',
        inputType: 'password'
      }).then(({ value }) => {
        console.log(value)
        this.$http({
          url: this.$http.adornUrl('/clothingtype/pay'),
          method: 'get',
          params: this.$http.adornParams({
            'password': value
          })
        }).then(({ data: res }) => {
          if (res && res.code === 0) {
            this.statusChange(row, status)
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 确认订单 发表评论
    confirmOrder (row, status) {
      this.$prompt('请输入对该设计的评价', '确认订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入评价',
        inputPattern: /\S/,
        inputErrorMessage: '请输入评价'
      }).then(({ value }) => {
        console.log(value)
        this.$http({
          url: this.$http.adornUrl('/sys/clothingorder/addOrderEvaluation/' + row.id + '/' + value),
          method: 'post'
          // params: this.$http.adornParams({
          //   'password': value
          // })
        }).then(({ data: res }) => {
          if (res && res.code === 0) {
            this.statusChange(row, status)
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/sys/clothingorder/orderpage'),
        method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 999
        })
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.dataList = res.data.list
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    },
    // 获取数据列表
    getUserInfo () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/info'),
        method: 'get'
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.dataForm = res.jsonObject
          this.$store.commit('user/updateName', res.jsonObject.username)
          this.$store.commit('user/updateRoleName', res.jsonObject.roleName)
          if (this.$store.state.user.roleName !== '管理员') {
            this.getDataList()
          }
        } else {
          this.dataForm = {}
        }
      })
    }
  }
}
</script>
